<template>
	<view class="container">
		<view class="card">
			<view class="text-container">
				<text class="quote">“惟有黄花不负秋。”</text>
				<text class="description">
					“立冬前最后一瞥，留住绚约秋日的惊艳。#爱上紫禁城#”
				</text>
				<text class="source">—— 来自微博 故宫博物院</text>
			</view>
			<view class="content">
				<!-- 轮播区 -->
				<view class="swiper-area w-full">
					<swiper class="h-full" indicator-dots circular="true" duration="400" :current="swiperIdx"
						@change="swiperChange">
						<swiper-item v-if="goods.video && goods.video.url" class="dflex-c">
							<!-- #ifdef APP -->
							<view class="wh-full pos-r" @click="toVideo">
								<image :src="goods.video.poster" class="wh-full" lazy-load mode="aspectFill"></image>
								<image class="bofang pos-a pos-tl-c" src="/static/images/common/bofang.svg">
								</image>
							</view>
							<!-- #endif -->

							<!-- #ifndef APP -->
							<view class="wh-full pos-r dflex-c" style="background: #000;" @click="toVideo">
								<video id="uVideo" :src="goods.video.url" :poster="goods.video.poster"
									:poster-for-crawler="goods.video.poster" :show-fullscreen-btn="false"
									:controls="false" :show-play-btn="false" :show-center-play-btn="false"
									:enable-progress-gesture="false" @ended="goods.video.pause = true"
									object-fit="cover" class="h-full" style="width: 100%;"></video>

								<image v-if="goods.video.pause" class="bofang pos-a pos-tl-c"
									src="/static/images/common/bofang.svg"></image>

							</view>
							<!-- #endif -->
						</swiper-item>
						<swiper-item v-for="(item, idx) in swiperDatas" :key="idx">
							<view class="wh-full">
								<image :src="item" class="wh-full" lazy-load mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<nx-video v-model="videoShow" :videoObj="goods.video" @exit="videoShow = false;"></nx-video>
			</view>
		</view>
	</view>
</template>

<style scoped>
	/* 页面容器样式 */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		/* 保证内容从顶部开始排列 */
		background-color: #f8f3e8;
		/* 设置背景颜色 */
		width: 100%;
		height: 100vh;
		/* 页面高度占满视口 */
		padding: 0rpx;
		/* 移除内边距 */
		box-sizing: border-box;
	}

	/* 卡片样式 */
	.card {
		background-color: #ffffff;
		/* 卡片白色背景 */
		border-radius: 16rpx;
		/* 圆角边框 */
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
		/* 添加阴影效果 */
		width: 96%;
		/* 卡片占据屏幕宽度的 90% */
		margin-top: 40rpx;
		/* 卡片与顶部的距离 */
		padding: 24rpx;
		/* 内边距 */
		overflow: hidden;
		/* 避免内容溢出 */
	}

	/* 文本区域 */
	.text-container {
		margin-bottom: 24rpx;
		/* 与图片区域的间距 */
	}

	.quote {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 1.5;
		color: #333333;
		/* 深灰色字体 */
	}

	.description {
		font-size: 28rpx;
		line-height: 1.5;
		color: #555555;
		margin-top: 12rpx;
	}

	.source {
		font-size: 24rpx;
		line-height: 1.5;
		color: #999999;
		margin-top: 12rpx;
	}

	/* 图片样式 */
	.flower-image {
		width: 100%;
		height: 305px;
		/* 高度自动适配 */
		border-radius: 8rpx;
		/* 图片圆角 */
	}	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	page {
		background-color: #f6f6f6;
	}

	/* 轮播区 */
	.swiper-area {
		height: 40vh;
		z-index: 0;
	}

	.dflex-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bofang {
		width: 50px;
		height: 50px;
	}

	.pos-r {
		position: relative;
	}

	.pos-a {
		position: absolute;
	}

	.pos-tl-c {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 宽高 */
	/* #ifdef APP-NVUE */
	.w-full {
		flex: 1;
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	.wh-full {
		width: 100%;
		height: 100%;
	}

	.w-full {
		width: 100%;
	}

	/* #endif */

	.h-full {
		height: 100%;
	}

	.container {
		padding: 20rpx;
		text-align: center;
	}

	.title {
		font-size: 32rpx;
		text-align: left;
		/* font-weight: bold; */
		margin-bottom: 20rpx;
	}

	.grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.grid-item {
		width: 32%;
		height: 165px;
		/* 三列布局，每行三个图像 */
		margin-bottom: 20rpx;
	}

	.image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 保持图片比例，不变形 */
		border-radius: 8rpx;
		/* 可选，增加圆角效果 */
	}
</style>

<script>
	import {
		url
	} from '@/utils/request.js';
	import {
		jerrybanner
	} from '@/components/jerry-banner/jerry-banner.vue'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	export default {
		data() {
			return {
				title: 'Hello',
				goods: {
					video: {
						url: "https://mp-b35bac59-8c68-4e5a-86c9-99ba1b58193d.cdn.bspapp.com/cloudstorage/50c7fbb5-77ad-45cd-8944-aed805d7e2e1.mp4",
						poster: 'http://img.netbian.com/file/2024/0323/small0012132yPPt1711123933.jpg',
						pause: true
					}
				},
				swiperDatas: [
					'https://mp-b35bac59-8c68-4e5a-86c9-99ba1b58193d.cdn.bspapp.com/cloudstorage/f583325d-730a-4863-a03f-651f9a97ddb2.png',
				],
				videoShow: false,
				Ordersprice: 0
			};
		},
		onLoad(option) {
			const appItem = JSON.parse(decodeURIComponent(option.appItem));
			console.log(appItem); // 输出解码后的数据
		
			// 如果 appItem 是数组
			this.Ordersprice = appItem[0]; // 获取价格
			const imageUrl = appItem[1]; // 获取图片 URL
			const title = appItem[2]; // 获取标题
			this.panelData.list[0].title = appItem[0]; // 将 title 设置为 appItem[0]
			this.panelData.list[0].desc = appItem[2]
			this.swiperDatas[0] = imageUrl
			this.goods.video.poster = imageUrl
			console.log(this.panelData); // 验证 panelData 是否更新成功
		
		
		},
		onShow(options) {
			// #ifdef APP || APP-NVUE
			this.isapp = true;
			// #endif
		},
		methods: {
			getPhoneNumber(e) {
				console.log(e.detail.code); // 动态令牌

				wx.cloud.callFunction({
					name: 'cloudbase_module',
					data: {
						name: 'wx_user_get_phone_number',
						data: {
							code: e.detail.code,
						},
					},
					success: (res) => {
						const phoneInfo = res.result?.phoneInfo;
						console.log('获取到的手机号信息: ', phoneInfo);
					},
				});
			},
			toVideo() {
				// #ifdef APP
				this.videoShow = true;
				return;
				// #endif
				if (!this.uVideo) this.uVideo = uni.createVideoContext('uVideo', this);
				if (this.uVideo.isplay) {
					this.uVideo.pause();
					this.uVideo.isplay = false;
					this.goods.video.pause = true;
					return;
				}
				this.uVideo.isplay = true;
				this.goods.video.pause = false;
				// this.goods.video.loaded = true;
				this.uVideo.play();
			},
			swiperChange(res) {
				if (res.detail && res.detail.current !== 0 && this.uVideo) {
					this.uVideo.pause();
					this.uVideo.isplay = false;
					this.goods.video.pause = true;
				}
			},
		},
	};
</script>